<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/fontsize.js"></script>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            width: 3.75rem;
            background-color: #F5F5F6;
        }
        .head {
            height: 1.23rem;
            line-height: 1.23rem;
            background-color: white;
            display: flex;
            align-items: center;
            border-bottom: 0.13rem solid #F5F5F6;
        }
        .head .personHeadDiv {
            width: 0.84rem;
            height: 0.87rem;
            display: flex;
            padding-left: 0.1rem;
        }
        .head .personHeadDiv img {
            width: 0.84rem;
            height: 0.87rem;
        }
        .head .personNameDiv {
            width: 2.5rem;
            height: 0.87rem;
            line-height: 0.87rem;
            padding-left: 0.18rem;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        .head .personNameDiv span {
            position: absolute;
            top: 0.04rem;
            font-size: 0.16rem;
            line-height: 0.18rem;
            font-weight: 550;
        }
        .head .personNameDiv .personNameDiv-div1{
            display: flex;
            margin-top: 0.36rem;
        }
        .head .personNameDiv .personNameDiv-div1 img{
            display: block;
            width: 0.16rem;
            height: 0.16rem;
           // background: red;
            margin-right: 0.06rem;
        }
        .head .personNameDiv .personNameDiv-div1 p{

            width: 0.42rem;
            height: 0.16rem;
            font-size: 0.14rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666669;
            line-height: 0.16rem;
        }
        .head .personNameDiv .personNameDiv-div2{
            display: flex;
            margin-top: 0.06rem;
        }
        .head .personNameDiv .personNameDiv-div2 img{
            width: 0.16rem;
            height: 0.16rem;
        }
        .head .personNameDiv .personNameDiv-div2 p{
            width: 0.89rem;
            height: 0.22rem;
            font-size: 0.14rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666669;
            line-height: 0.22rem;
        }
        .content {
            width: 3.75rem;
            height: 4.26rem;
            line-height: 0.7rem;
        }
        .content div {
            width: 3.75rem;
            height: 0.8rem;
            line-height: 0.8rem;
            background-color: white;
            border-bottom: 0.02px solid grey;
            padding: 0 0.1rem 0 0.1rem;
            display: flex;
            align-items: center;
        }
        .content div .iconInteractive {
            width: 0.2rem;
            height: 0.2rem;
            border: #233981 dashed 0.01rem;
            padding: 0;
        }
        .content div .iconInteractive img {
            width: 0.2rem;
            height: 0.2rem;
        }
        .content div .describe {
            width: 3rem;
            font-size: 0.16rem;
            font-weight: 600;
        }
        .content div .count {
            width: 0.6rem;
            padding: 0;
            display: flex;
            justify-content: flex-end;
        }
         #countNumber{
            width: 0.26rem;
            height: 0.15rem;
            font-size: 0.12rem;
            background: red;
            border-radius: 0.1rem ;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 0.1rem;
        }
        .content div .count .next {
            margin-left: 0.1rem;
            width: 0.2rem;
            height: 0.2rem;
            border: #233981 dashed 0.01rem;
            padding: 0;
        }
        .content div .count .next img {
            width: 0.2rem;
            height: 0.2rem;
        }

    </style>
    <title>个人中心_105</title>
</head>
<body>
<div class="head">
    <div class="personHeadDiv">
        <img src="images/person/head.png" alt="head">
    </div>
    <div class="personNameDiv">
        <span>奔跑的土豆</span>
        <div class="personNameDiv-div1">
            <img src="./images/person/icon_name.png" alt="">
            <p>诸葛峰</p>
        </div>
        <div class="personNameDiv-div2">
            <img src="./images/person/icon_phone.png">
            <p>15678905634</p>
        </div>
    </div>
</div>
<div class="content">
    <div>
        <div class="iconInteractive">
            <img src="./images/person/icon_message.png" alt="">
        </div>
        <div class="describe">我的点赞</div>
        <div class="count">
            <div class="next">
                <img src="./images/person/icon_next step.png" alt="">
            </div>
        </div>
    </div>
    <div>
        <div class="iconInteractive">
            <img src="./images/person/icon_location.png" alt="">
        </div>
        <div class="describe">我的收藏</div>
        <div class="count">

            <div class="next">
                <img src="./images/person/icon_next step.png" alt="">
            </div>
        </div>
    </div>
    <div>
        <div class="iconInteractive">
            <img src="./images/person/icon_comment.png" alt="">
        </div>
        <div class="describe">我的评论</div>
        <div class="count">
            <div id="countNumber">
                12
            </div>
            <div class="next">
                <img src="./images/person/icon_next step.png" alt="">
            </div>
        </div>
    </div>
</div>
</body>
</html>
